<template>
	<el-dialog
		:model-value="dialogVisible"
		title="更新目录"
		width="40%"
		:before-close="dialogBeforeClose"
		custom-class="my-dialog"
		@open="initFrom"
	>
		<el-form ref="form" :model="formData">
			<el-form-item label="文件标题" prop="title" :label-width="formLabelWidth">
				<el-input v-model="formData.title" size="small" autocomplete="off" />
			</el-form-item>
			<el-form-item label="文件上传" :label-width="formLabelWidth">
				<el-upload
					ref="upload"
					class="my-upload upload-demo"
					action=""
					:on-preview="filePreview"
					:on-remove="fileRemove"
					:file-list="fileList"
					:auto-upload="false"
					list-type="text"
					:limit="1"
					:on-exceed="exceedFiles"
					:http-request="defineUpFile"
				>
					<el-button size="small" type="primary"> 选取文件 </el-button>
					<el-button style="margin-left: 10px" size="small" type="success" @click="submitUpload">
						{{ upLoadBtnText }}
					</el-button>
					<div class="el-upload__tip">只能上传视屏格式文件</div>
				</el-upload>
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="cancelForm">取 消</el-button>
				<el-button type="primary" @click="submitForm">更 新</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import { EnumResult } from '@/assets/model/enums/EnumUtil';
import RequestUtil from '@/assets/model/common/RequestUtil';
import { recall } from '@/api';

@Options({
	props: {
		dialogVisible: Boolean,
		rowData: {}
	},
	emits: ['changeEdit']
})
export default class Edit extends Vue {
	private rowData: any;
	public video = new recall.video();
	/**表单属性字段 */
	formData = {
		id: '',
		title: '',
		dirId: '',
		serverPath: '',
		fileName: '',
		url: '',
		listId: ''
	};

	/**表单宽度 */
	formLabelWidth = '100px';
	mounted() {}
	public initFrom() {
		this.formData.id = this.rowData.id;
		this.formData.title = this.rowData.title;
		this.formData.dirId = this.rowData.dirId;
		this.formData.serverPath = this.rowData.serverPath;
		this.formData.fileName = this.rowData.fileName;
		this.formData.url = this.rowData.url;
		this.formData.listId = this.rowData.listId;
	}
	/**dialog叉号点击方法,关闭之前拦截执行 */
	dialogBeforeClose(done: any) {
		this.cancelForm();
	}
	/**重置表单 */
	clearForm() {
		let methes: any = this.$refs['form'];
		methes.resetFields();
	}
	//取消操作
	cancelForm() {
		this.clearForm();
		this.$emit('changeEdit', false);
	}
	//提交目录信息
	submitForm() {
		let _this: any = this;
		let parent: any = _this.$parent;
		let data = this.formData;
		_this
			.$confirm('确定更新目录？', '更新提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
			.then(() => {
				RequestUtil.OperateData(this.video.updatevideo(data)).then(function (response: EnumResult) {
					if (response == EnumResult.success) {
						_this.cancelForm();
						parent.getCatalog();
						parent.refresh();
					}
				});
			})
			.catch(() => {
				_this.$message({
					type: 'info',
					message: '已取消更新'
				});
			});
	}
}
</script>

<style lang="scss"></style>
